<template>
  <div class="app-container machineContainer">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <span style="color: #888;">选择门店：</span>
          <el-select filterable v-model="formInline.store_id">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">陈列区域：</span>
          <el-select v-model="formInline.display_type">
            <el-option v-for="item in gift_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">查 询</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图片" width="80">
          <template slot-scope="scope">
            <div v-viewer="options" class="images fit">
              <img :src="scope.row.thumb" :data-source="scope.row.img" class="image" :key="scope.row.thumb" />
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="名称" prop="name"></el-table-column>
        <el-table-column align="center" label="礼品编号" prop="id"></el-table-column>
        <el-table-column align="center" label="神采编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label="一级分类" prop="one_type"></el-table-column>
        <el-table-column align="center" label="二级分类" prop="tow_type">
        </el-table-column>
        <el-table-column align="center" label="陈列区域">
          <template slot-scope="scope">
            <span v-if="scope.row.display_type==0">礼品机陈列</span>
            <span v-if="scope.row.display_type==2">礼品柜陈列</span>
            <span v-if="scope.row.display_type==1">摊位机陈列</span>
            <span v-if="scope.row.display_type==3">企划陈列</span>
            <span v-if="scope.row.display_type==4">其他陈列</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="门店成本价" prop="money_cost">
          <template slot-scope="scope">
            {{scope.row.money_cost|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="陈列数量" prop="num"></el-table-column>
        <el-table-column align="center" label="金额小计" prop="amount">
          <template slot-scope="scope">
            {{scope.row.amount|keepTwoNum}}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
      <p style="text-align:center;font-size: 14px;color: rgb(96, 98, 102);float:right">数量合计：{{total_number||0}}个 金额合计：{{(total_money||0)|keepTwoNum}}元</p>
    </div>
  </div>
</template>

<script>
import { getList, getPage, getStoreList } from '@/api/warehouse/display_Stock';
export default {
  data() {
    return {
      listLoading: false,
      list: null,
      currentPage: 1,
      storeList: null,
      totalDataNumber: 0,
      total_number: 0,
      total_money: 0,
      amount: null,
      options: {
        //预览图配置
        toolbar: true,
        url: 'data-source'
      },
      gift_list: [
        { name: '礼品机陈列', id: 0 },
        { name: '礼品柜陈列', id: 2 },
        { name: '摊位机陈列', id: 1 },
        { name: '企划陈列', id: 3 },
        { name: '其他陈列', id: 4 }
      ],
      formInline: {
        display_type: 0,
        store_id: null
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (!vm.storeList) {
        vm.getStore();
      }
    });
  },
  methods: {
    // 获取门店
    getStore() {
      getStoreList({
        category_id: 648
      }).then(response => {
        this.storeList = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        } else {
          if (this.storeList.length > 0) {
            this.formInline.store_id = this.storeList[0].id;
          }
        }
      });
    },
    // 列表获取
    fetchData() {
      this.currentPage = 1;
      this.listLoading = true;
      getPage(this.formInline)
        .then(response => {
          this.totalDataNumber = response.data.page * 20;
          this.total_number = response.data.all_num;
          this.total_money = response.data.all_money;
          getList(this.formInline).then(response => {
            response.data.forEach(val => {
              val.amount = val.num * val.money_cost;
            });
            this.list = response.data;
            this.listLoading = false;
          });
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then(response => {
        response.data.forEach(val => {
          val.amount = val.num * val.money_cost;
        });
        this.list = response.data;
        this.listLoading = false;
      });
    }
  }
};
</script>